<template>
  <div class="mod-admin__education">
    <div class="top-search">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" label-position="top">
        <div class="top-search_form">
          <div class="top-search_form_btn">
            <el-form-item>
              <el-button @click="state.getDataList()">{{ $t("reset") }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="content">
      <el-table v-loading="state.dataListLoading" :data="state.dataList" @sort-change="state.dataListSortChangeHandle"
        style="width: 100%;height: calc(100vh - 390px);">
        <el-table-column type="selection" width="55" align="center" :selectable="selectInit"> </el-table-column>
            <el-table-column type="expand">
                <template v-slot="scope">
                    <div style="margin: 0 0px 0 50px">
                        <el-table :data="scope.row.detailList" highlight-current-row ref="multipleTable" border>
                            <el-table-column prop="orderno" label="订单号" sortable></el-table-column>
                            <el-table-column prop="dishname" align="center" label="菜品名称" sortable></el-table-column>
                            <el-table-column prop="seriesname" align="center" label="菜品分类" sortable></el-table-column>
                            <el-table-column prop="num" align="center" label="数量" sortable></el-table-column>
                            <el-table-column prop="price" align="center" label="价格" sortable></el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="订单ID" sortable></el-table-column>
            <el-table-column prop="orderNo" label="订单号" sortable></el-table-column>
            <el-table-column prop="tradeNo" label="流水号" sortable></el-table-column>
            <el-table-column prop="name" align="center" label="提交人" sortable></el-table-column>

            <el-table-column prop="status" label="订单状态" align="center" sortable>
                <template v-slot="scope">
                    <el-tag v-if="scope.row.status === 'unpaid'">待付款</el-tag>
                    <el-tag type="success" v-else-if="scope.row.status === 'back'" style="margin: 0 10px">待处理</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.status === 'unreceived'" style="margin: 0 10px">已发货</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.status === 'refunded'" style="margin: 0 10px">已退款</el-tag>
                    <el-tag type="info" v-else-if="scope.row.status === 'completed'" style="margin: 0 10px">已完成</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.status === 'cancel'" style="margin: 0 10px">已取消</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="amt" align="center" label="金额(元)" sortable> </el-table-column>
            <el-table-column prop="meal" label="餐别" align="center" sortable>
                <template v-slot="scope">
                    <span v-if="scope.row.meal === '01'">早餐</span>
                    <span v-else-if="scope.row.meal === '02'" style="margin: 0 10px">午餐</span>
                    <span v-else-if="scope.row.meal === '03'" style="margin: 0 10px">晚餐</span>
                </template>
            </el-table-column>
            <el-table-column prop="eatDate" align="center" label="用餐时间" sortable></el-table-column>
            <el-table-column prop="createTime" align="center" label="创建时间" sortable></el-table-column>
            <el-table-column prop="updateTime" align="center" label="更新时间" sortable></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template v-slot="scope">
            <el-button @click="handleCancel(scope.row.id)" type="danger" size="mini"
              v-if="scope.row.status == 'back'">退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, onMounted } from "vue";
import { ElMessageBox, ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n'
import baseService from "@/service/baseService";
const { t } = useI18n();

const view = reactive({
  getDataListURL: "/catering/meal/order/list",
  getDataListIsPage: true,
  dataForm: {
  },
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const selectInit = (row: any) => {
  if (row.status === 'back') {
    return true
  } else {
    return false
  }
};

const handleCancel = (id?: string) => { };

const addOrUpdateHandle = (id?: string) => { };

onMounted(() => {
})
</script>
<style lang="less" scoped>
.top-search {
  background-color: #fff;
  padding: 20px 30px 10px;
  border-radius: 10px;
  display: flex;

  /deep/ .el-form {
    width: 100%;
  }

  &_form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    &_btn {
      display: flex;
    }
  }
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin: 15px 0 0;

  .school-name {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
  }

  &-btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style>